<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('绑定用户')"/>
    <th:block th:include="include :: bootstrap-duallistbox-css"/>
    <style>
        .row {
            max-width: 800px;
            display: flex;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated ibox-content">
    <form id="form" action="#" class="wizard-big">
        <input name="boatId" th:value="${boat.id}" type="hidden">
        <select class="form-control dual_select" multiple name="users">
            <option th:each="user : ${userList}" th:text="${user.dept.deptName + ' - ' + user.userName}" th:value="${user.userId}"
                    th:selected="${userIdList.contains(user.userId)}"></option>
        </select>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-duallistbox-js"/>
<script type="text/javascript">
    $('.dual_select').bootstrapDualListbox({
        nonSelectedListLabel: '未绑绑用户',
        selectedListLabel: '已绑用户',
        preserveSelectionOnMove: 'moved',
        moveOnSelect: true,           // 出现一个剪头，表示可以一次选择一个
        filterTextClear: '展示所有',
        moveSelectedLabel: "添加",
        moveAllLabel: '添加所有',
        removeSelectedLabel: "移除",
        removeAllLabel: '移除所有',
        infoText: '共{0}个',
        showFilterInputs: true,       // 是否带搜索
        filterPlaceHolder: '搜索',
        infoTextEmpty: '共0个',
        selectorMinimalHeight: 160,
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(ctx + "boat/alert/user", $('#form').serialize());
        }
    }
</script>
</body>
</html>
